<script>
export default {
  name: "PubQuestionDialog",
  data(){
    return {
      dialogVisible:false,
      isDisable:false,
      isIndeterminate: true,//是否全选
      checkAll: false,
      task_form:{
        accIds:'',
        gropName:'',
        doctorId:'',
        doctorUname:'',
        taskTypes:[]
      },
      acc_names:[],
      hintGropNames:[],
      total_choose:0,
      choose_arr:[],
      v1:false,
      v2:false,
      v3:false,
      v4:false,
      v5:false,
      v6:false,
      v7:false,
      rules:{
        gropName:[
          { required: true, message: '请输入任务名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
        ],
        taskTypes:[
          { required: true, message: '请选择任伤',trigger: 'change'},
        ]
      }
    }
  },
  created() {
    this.choose_version()
  },
  mounted() {
    this.init_hint();

  },
  methods:{

      // 选择发布任务的版本，版本在可store/index.js中自行定义
      choose_version(){
        const versionType = Number(this.$store.state.version_type)

        const arr = [this.v1,this.v2,this.v3,this.v4,this.v5,this.v6,this.v7];

        if(versionType < 4){
          this.choose_arr = ['1','2','3']
          this.total_choose = 3

          if(versionType==1){
            this.v1 = true;   this.v2 = false;  this.v3 = false;
            this.v4 = false;  this.v5 = false;  this.v6 = false;  this.v7 = false;
          }else if(versionType==2){
            this.v1 = true;   this.v2 = true;  this.v3 = false;
            this.v4 = false;  this.v5 = false;  this.v6 = false;  this.v7 = false;
          }else if(versionType==3){
            this.v1 = true;   this.v2 = true;  this.v3 = true;
            this.v4 = false;  this.v5 = false;  this.v6 = false;  this.v7 = false;
          }
        }else{
          this.choose_arr = ['4','5','6','7']
          this.total_choose = 4
          if(versionType==4){
            this.v1 = false;   this.v2 = false;  this.v3 = false;
            this.v4 = true;  this.v5 = false;  this.v6 = false;  this.v7 = false;
          }else if(versionType==5){
            this.v1 = false;   this.v2 = false;  this.v3 = false;
            this.v4 = true;     this.v5 = true;  this.v6 = false;  this.v7 = false;
          }else if(versionType==6){
            this.v1 = false;   this.v2 = false;  this.v3 = false;
            this.v4 = true;     this.v5 = true;  this.v6 = true;    this.v7 = false;
          }else if(versionType==7){
            this.v1 = false;   this.v2 = false;  this.v3 = false;
            this.v4 = true;     this.v5 = true;  this.v6 = true;    this.v7 = true;
          }
        }



      },

      //显示对话框,并填充部分数据
      showDialog(acc_ids,acc_names_str){
          this.dialogVisible = true;
          this.task_form.accIds = acc_ids;
          this.task_form.doctorId = sessionStorage.getItem("acc_id")
          this.task_form.doctorUname = sessionStorage.getItem("uname");
          this.acc_names = acc_names_str.split(",");
          this.acc_names.pop();
      },

      //重置对话框内表单的内容,在关闭弹窗后执行，打开弹窗后执行不成功
      reset_dialog(){
        this.task_form.gropName = "";
        this.task_form.taskTypes = [];
        this.$refs.task_form.resetFields();
      },

      //发布任务
      pub_task(){
        this.isDisable = true;
        const _this = this;
        this.$refs.task_form.validate((valid) => {
            if(valid){
                _this.$http.post("/tasks/pub_task",this.task_form).then((res)=>{
                    _this.$message.success("发布成功")
                    //通知父元素，更新用户测试状态
                    _this.$emit('pubed');
                    _this.dialogVisible = false;
                    //更新提示信息
                    _this.init_hint();
                })
            }
        })
       setTimeout(()=>{
         this.isDisable = false;
       },2000)
    },

      //选中任务组提示信息后，移除检验错误提示
      handleSelect(item){
          if(item){
              this.$refs.task_form.clearValidate('gropName');
          }
      },

      //初始化所有的任务小组名称
      async init_hint(){
          const res = await this.$http.get("/taskGrops/get_grop_names");
          const hint_names = res.data.data;
          if(hint_names){
            this.hintGropNames = hint_names;
          }
      },

      //根据输入进行筛选
      querySearch(queryStr,cb){
        var res = [];
        var gropNames = this.hintGropNames;
        if(queryStr){
          res = gropNames.filter(this.createFilter(queryStr))
        }else{
          res = this.hintGropNames;
        }
        cb(res);
      },

      //模糊过滤进行筛选
      createFilter(queryString) {
        const regex = new RegExp(queryString, 'i');
        return (gropNames) => {
          return (regex.test(gropNames.value));
        };
      },

    handleCheckAllChange(val) {
      this.task_form.taskTypes = val ? this.choose_arr : [];
      this.isIndeterminate = false;
    },
    handleCheckedtypesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.total_choose;  //3为所有选项的总数量
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.total_choose;
    }
  }
}
</script>

<template>
    <el-dialog
        title="任务发布"
        :visible.sync="dialogVisible"
        width="30%"
        @closed="reset_dialog"
        :close-on-click-modal="false"
        >
          <el-form ref="task_form" :rules="rules" :model="task_form" label-width="80px">
            <el-form-item label="任务名称" prop="gropName">
              <el-autocomplete
                  style="width: 100%"
                  class="inline-input"
                  v-model="task_form.gropName"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入任务名称"
                  @select="handleSelect"
              ></el-autocomplete>
            </el-form-item>

            <el-form-item label="任务类型" prop="taskTypes">
              <el-checkbox  :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
              <el-checkbox-group v-model="task_form.taskTypes" @change="handleCheckedtypesChange">
                  <el-row>
                    <el-checkbox v-if="v1"  label="1"  name="type">任务一(共104道)</el-checkbox>
                    <el-checkbox v-if="v2" label="2"  name="type" >任务二(共180道)</el-checkbox>
                  </el-row>
                <el-row>
                  <el-checkbox v-if="v3" label="3"   name="type">任务三(共60道)</el-checkbox>
                </el-row>
                <el-row>
                  <el-checkbox v-if="v4" label="4"  name="type">任务一(共88道)</el-checkbox>
                  <el-checkbox v-if="v5" label="5"  name="type" >任务二(共120道)</el-checkbox>
                </el-row>
                <el-row>
                  <el-checkbox v-if="v6" label="6"   name="type">任务三(共113道)</el-checkbox>
                  <el-checkbox v-if="v7" label="7"   name="type">任务四(共180道)</el-checkbox>
                </el-row>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="已选用户">
                <el-tag style="margin-right: 10px" v-for="name in acc_names">{{ name }}</el-tag>
            </el-form-item>
          </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" :disabled="isDisable" @click="pub_task">发 布</el-button>
        </span>
    </el-dialog>
</template>

<style scoped>
  .top_margin1{
    margin-top: 8px;
  }
  .top_margin2{
    margin-top: 40px;
  }
</style>